<template>
    <div class="Tag1" ref="Tag1">
        {{content}}
    </div>
</template>
<script>
export default {
    name: 'Tag1',
    props: ['content','theme'],
    mounted(){
        if(this.theme == 'red'){
            
            this.$refs.Tag1.style.color = 'rgb(243, 78, 78)'
            this.$refs.Tag1.style.border = '1px solid rgb(243, 78, 78)'
        }else if(this.theme == 'blue'){
            this.$refs.Tag1.style.color = 'rgb(61, 61, 243)'
            this.$refs.Tag1.style.border = '1px solid rgb(61, 61, 243)'
        }else
            console.log('theme is set wrongly')
        
    }
}
</script>
<style scoped>
.Tag1{
    display: inline-block;
    width: 46px;
    /* color:rgb(243, 78, 78); */
    border-radius: 4px;
    /* border: 1px solid rgb(243, 78, 78); */
    font-size: 10px;
    margin-right:10px;
    text-align: center;
    vertical-align:4px; 
}
</style>
